<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sweat</title>
    <style>
        body{
            background: #fff;
            width: 100vw;
            height: 100vh;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        } 
        .head{
            position: relative;
            width: 480px;
            height: 480px;
            box-shadow: 0 0 1px 2px #ccc;
            background: #fff;
            border-radius: 50%;
        }
        .head::before{
            content:'';
            position: absolute;
            left: 20px;
            top: 20px;
            width: 440px;
            height: 440px;
            background: #fdc333;
            box-shadow:0 0 25px 15px #fc921c inset;
            border-radius: 50%;
        }
        .head::after{
            content:'';
            position: absolute;
            left: 100px;
            top: 50px;
            width: 280px;
            height: 140px;
            background: linear-gradient(to bottom,#fff3d0,#fdc333);
            border-radius: 380px 380px 0 0;
        }
        .eyebrow{
            position: absolute;
            top: 150px;
            width:100px;
            height: 20px;
            background: #6f461a;
            border-radius: 75% 75% 50% 50% ;
            z-index: 11;
            transform:  rotate(calc(30deg * var(--n)));
            box-shadow: 0 6px 3px 1px #000 inset,0 8px 2px 0 #f3e731;
        }
        .eyebrowL{
            left: 84px;
            --n:-1;
        }
        .eyebrowR{
            right: 84px;
            --n:1;
        }
        .eyes{
            position: absolute;
            width: 54px;
            height: 82px;
            top: 184px;
            background: #6f461a;
            border-radius: 50%;  
            z-index: 11;
            box-shadow: 0 6px 3px 1px #000 inset,0 8px 2px 0 #f3e731;
            transform:  rotate(calc(5deg * var(--n)));
        }
        .eyesL{
            left: 150px;            
            --n:-1;
        }
        .eyesR{
            right: 150px;            
            --n:1;
        }
        .mounth{
            position: absolute;
            width: 120px;
            height: 60px;
            background: #6f461a;
            box-shadow: 0 6px 3px 1px #000 inset;
            border-radius: 50%;
            top: 325px;
            left: 180px;
        }
        .mounth::after{
            content:'';
            position: absolute;
            width: 100%;
            height: 45px;
            background: #fdc333;
            border-radius: 50%;
            top: 18px;
            border-top: #f3e731 solid 5px;
        }
        .sweat{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            left: 96px;
            top: 250px;
            width: 102px;
            height: 102px;
            background: #51a6df;
            box-shadow:0 0 2px 2px #1337a5;
            border-radius: 50% 0 50% 50%;
            transform-origin: bottom;
            transform: rotate(-45deg);
        }
        .sweat::before{
            content:'';
            position: absolute;
            width: 50px;
            height: 50px;
            background: #c6e9fd;
            border: 3px solid #fff;
            border-radius: 50% 0 50% 50%;
            transform: rotate(0);
            box-shadow:-30px 30px 30px 2px #fff;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="eyebrow eyebrowL"></div>
        <div class="eyebrow eyebrowR"></div>
        <div class="eyes eyesL"></div>
        <div class="eyes eyesR"></div>
        <div class="mounth"></div>
        <div class="sweat"></div>
    </div>
</body>
</html>
